<div class="row">
  <div class="step-wrapper large-10 large-centered column">
    <div class="stpy large-12 column">

      <div class="step-statement large-4 columns">
        <h5>User Registration</h5>
        <p>Find Collegues in behomebased.ph</p>
      </div>  

      <div class="stepbystep  large-8 columns">
        <div class="right ui ordered  small steps">
          <div class="completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Basic Information</div>
            </div>
          </div>

          <div class="animated slideInRight completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Address</div>
            </div>
          </div>
          <div class="active step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Education</div>
            </div>
          </div>
          <div class="disabled step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Work Experience</div>
            </div>
          </div>         
        </div>
      </div>

      <div class="hr-reg large-12 column"><hr></div>
<!--
        <div class=" large-8 columns" style="padding:0;">
          <label style="margin-top:-.9rem;margin-bottom:1rem;"><small>*Required Fields</small></label>
        </div>
      <div class="large-7 columns" style="padding:0;">

        <div class="large-12 column" style="padding:0;padding-right:3rem;">
        <p>Educational Attaintment</p>
        
          <div class="edu-wrap large-12 columns">
            <input placeholder="" style="width: 100%;" tabindex="0" id="s2id" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="select2-input" type="text">
          </div>

          <div class="edu-wrap large-12 columns">
            <div class="large-4 columns" style="padding-left:0;">
              <select class="radius">
                <option>Attaintment</option>
                <option>Secondary</option>
                <option>Tertiary</option>
                <option>Master's Degree</option>
                <option>Doctoral</option>
              </select>
            </div>
            <div class="large-4 columns" style="">
              <select class="radius">
                <option>Year Started</option>
              </select>
            </div>
            <div class="large-4 columns" style="padding-right:0;">
              <select class="radius">
                <option>Year Graduated</option>
              </select>
            </div>
          </div>

          <div class="edu-wrap large-12 columns">
            <select id="coursedropdown" style="width:100%;">
              <option></option>
              <option value="">Bachelor of Science in Information Technology</option>
              <option value="">Bachelor of Science in Computer Science</option>
            </select>
          </div>
        </div>
        <div class="add-school large-12 column" style="padding:0;">
            <a href="">+Add School</a>
        </div>
        <div class="skill-wrap large-12 column">
        <p>Skills</p>
          <input placeholder="" style="width: 100%;" tabindex="0" id="skills-auto" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="radius select2-input" type="text">
        </div>

      </div>

      <div class="large-5 columns" style="padding:;">
        <div class="school-field large-12 columns">
          <div class="large-8 columns">
            <p id="school">Sta. Clara Parish School</p>
            <p id="attaintment" style="margin-top:-1.2rem;"><small>Secondary</small></p>
          </div>
          <div class="cancel-btn text-right large-4 columns">
            <a class="tiny radius button"><i class="fa fa-pencil-square-o"></i></a>&nbsp;
            <a class="tiny radius button"><i class="fa fa-times"></i></a>
          </div>
        </div>

        <div class="school-field large-12 columns">
          <div class="large-8 columns">
            <p id="school">Adamson University | <a>BS Information Technology</a></p>
            <p id="attaintment" style="margin-top:-1.2rem;"><small>Tertiary</small></p>
          </div>
          <div class="cancel-btn text-right large-4 columns">
            <a class="tiny radius button"><i class="fa fa-pencil-square-o"></i></a>&nbsp;
            <a class="tiny radius button"><i class="fa fa-times"></i></a>
          </div>
        </div>
      </div>

      <div class="edu-wrap  arge-12 columns" style="margin-top:1rem;">
        <div class="btn-save text-left large-8 columns" style="padding:0;">
         <a href="<?=BASE_URI ?>registration/step_2" class="text-left button">Previous</a>     
        </div>
        <div class="btn-save text-right large-4 columns" style="padding:0;"> 
          <a href="<?=BASE_URI ?>registration/step_4" class="button">Next</a>
        </div>
      </div>-->
      <div class="large-12 column" style="padding:0;margin-top:1rem;">
          <div class="btn-save text-left large-8 columns" style="padding:0;">
            <a href="<?=BASE_URI ?>registration/step_2" class="text-left button">Previous</a>     
          </div>
          <div class="btn-save text-right large-4 columns" style="padding:0;"> 
            <a id="btnSaveStep3"  class="button">Next</a>
          </div>
      </div>

    </div>
  </div>
</div>

<!--
<script>
  $(document).ready(function() {
    $("#s2id").select2({
      tags:["Adamson University", "Ateneo De Manila university"],
      maximumSelectionSize: 1
    });

    $("#coursedropdown").select2({
      placeholder: "Degree",
      allowClear: true
    });

    $("#skills-auto").select2({
      tags:["PHP", "HTML", "VB.Net","Web Design","Mysql","Gulp","Grunt","Sass","CSS","Phalcon","SDLC","Water Fall","Scrumming","Project Management"],
      maximumSelectionSize: 5,
      placeholder: "Select Skills"
    });
  });
</script>-->

<style>
body {
  background: #F5F5F5 !important;
}
</style>





